<template>
  <div class='msg-item'>
    <p>{{ title }}</p>
    <p :class="{'high-light': highLight}">{{ value }}</p>
  </div>
</template>

<script>
  export default {
    name: 'MsgItem',
    props: {
      title: String,
      value: String,
      highLight: Boolean
    }
  }
</script>

<style lang="scss" scoped>
  @import '@/assets/css/base.scss';
  .msg-item {
    display: flex;
    width: 100%;
    align-items: center;
    padding: 0.25rem 0;
    border-bottom: 1px solid #EEEEEE;
    p {
      flex: 1;
      padding: 0 0.2rem;
      font-size: 0.28rem;
      &:last-child {
        text-align: right;
        color: #717171;
        &.high-light {
          color: $colorRed;
          font-size: 0.32rem;
        }
      }
    }
  }
</style>
